<template>
  <div class="purchase">
    <div class="purchase-table" ref="purchaseTable">
      <table>
        <tr>
          <td></td>
          <td>预计</td>
          <td>实际</td>
        </tr>
        <tr>
          <td>采购明细</td>
          <td>{{formatValue(+model.planPurchase)}}</td>
          <td><a @click='handleClick("purchase")'>{{formatValue(+model.actualPurchase) }}</a></td>
        </tr>
      </table>
    </div>
    <div id="purchase-chart"></div>
  </div>
</template>

<script>
import {getAction} from '@api/manage'
import { splitByNum } from '@/utils/util'
export default {
  name: "ContractCost",
  description: "采购明细页面",
  data() {
    return {
      url: {
        purchase: "/pm/hfPmProjectCheck/purchase"
      },
      model: {}
    }
  },
  methods: {
    handleClick(field){
      this.$emit('change',field)
    },
    formatValue(value){
      return splitByNum(value)
    },
    loadData(id) {
      getAction(this.url.purchase, {id}).then(res => {
        if (res.success) {
          this.model = res.result
          let obj = Object.assign({}, {xAxisData: ['采购费用']}, res.result)
          this.renderChart(obj)
        }
      })
    },
    renderChart(obj) {
      let myCharts = this.$echarts.init(document.getElementById('purchase-chart'))
      let option = {
        title: {
          text: '',
          show: false,
          textAlign: "center",
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        legend: {
          data: ['预计', '实际']
        },
        xAxis: {
          type: 'value',
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 14,
          },
          axisPointer: {type: 'shadow'}
        },
        yAxis: {
          type: 'category',
          data: obj.xAxisData,
        },
        series: [
          {
            name: '预计',
            type: 'bar',
            data: [obj.planPurchase]
          },
          {
            name: '实际',
            type: 'bar',
            data: [obj.actualPurchase]
          },
        ]
      };
      myCharts.setOption(option)
      window.onresize = () => {
        myCharts.resize()
      }
    },
  }
}
</script>

<style scoped lang="less">
.purchase {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  &-table {
    width: 30%;
    height: 100%;

    table {
      width: 100%;
      border: 1px solid #e8e8e8;

      tr {
        width: 100%;
        border-bottom: 1px solid #e8e8e8;

        &:last-child {
          border-bottom: none;
        }

        &:first-child {
          background-color: #fafafa;
          color: rgba(0, 0, 0, 0.85);
        }

        td {
          width: 33.33%;
          height: 38px;
          line-height: 38px;
          text-align: center;
          font-size: 14px;
          border-right: 1px solid #e8e8e8;

          &:last-child {
            border-right: none;
          }

          &:first-child {
            background-color: #fafafa;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
  }

  #purchase-chart {
    width: 70%;
    height: 200px;
  }
}
</style>